import { history, useModel } from '@umijs/max';
import styles from './index.less';
import { Badge, Dropdown, Spin, Tabs } from 'antd';
import { useEffect, useMemo } from 'react';
import useSearchParams from '@/hooks/useSearchParams';
import { EllipsisOutlined } from '@ant-design/icons';
import { noticeFileds } from '@/constants/array';
import { useRequest } from 'ahooks';
import { getNoticeComment, getNoticeFavorites, getNoticeFollow, getNoticeLike, readNoticeComment, readNoticeFavorites, readNoticeFollow, readNoticeLike } from '@/services/commonServices';
import { UserOutlined, MessageOutlined } from '@ant-design/icons';
import Avatar from '@/components/Avatar';
import SpinBox from '@/components/SpinBox';

export default () => {
  const { type = noticeFileds[0].key } = useSearchParams();
  const { changeNoticeNum, noticeNum } = useModel('global');
  const items = useMemo(() => {
    return {
      'followCount': {
        listApi: getNoticeFollow,
        readApi: readNoticeFollow,
        render: (item) => <><div className={styles.item} >
            <div className={styles.item_left}>
              <Avatar size={32} userId={item.followerId} avatar={item.avatar} />
            </div>
            <div className={styles.item_right}>
              <div className={styles.item_name}>{item.nickname}关注了你{item.isRead === 0 && <Badge color='red'></Badge>}</div>
              <div className={styles.item_text}>{item.updatedTime}</div>
            </div>
        </div></>
      },
      'likeCount': {
        listApi: getNoticeLike,
        readApi: readNoticeLike,
        render: (item) => <><div className={styles.item} onClick={() => {
          history.push(`/view/${item.articleId}`)
        }}>
             <div className={styles.item_left}>
             <Avatar size={32} userId={item.userId} avatar={item.avatar} />
          </div>
          <div className={styles.item_right}>
            <div className={styles.item_name}>{item.nickname}点赞了你的文章{`《${item.articleTitle}》`}{item.isRead === 0 && <Badge color='red'></Badge>}</div>
            <div className={styles.item_text}>{item.updatedTime}</div>
          </div>
        </div></>
      },
      'favoritesCount': {
        listApi: getNoticeFavorites,
        readApi: readNoticeFavorites,
        render: (item) => <><div className={styles.item} onClick={() => {
          history.push(`/view/${item.articleId}`)
        }}>
          <div className={styles.item_left}>
          <Avatar size={32} userId={item.userId} avatar={item.avatar} />
          </div>
          <div className={styles.item_right}>
            <div className={styles.item_name}>{item.nickname} 收藏了你的文章{`《${item.articleTitle}》`}{item.isRead === 0 && <Badge color='red'></Badge>}</div>
            <div className={styles.item_text}>{item.updatedTime}</div>
          </div>
        </div></>
      },
      'commentCount': {
        listApi: getNoticeComment,
        readApi: readNoticeComment,
        render: (item) => <><div className={styles.item} onClick={() => {
          history.push(`/view/${item.articleId}`)
        }}>
          <div className={styles.item_left}>
            <Avatar size={32} userId='' avatar={item.avatar} />
          </div>
          <div className={styles.item_right}>
            <div className={styles.item_name}>{item.nickname}评论了你的文章{`《${item.articleTitle}》`}{item.isRead === 0 && <Badge color='red'></Badge>}</div>
            <div className={styles.item_text}>{item.content}</div>
            <div className={styles.item_text}>{item.updatedTime}</div>
          </div>
        </div>
        </>
      },
    }
  }, [])

  const { data, loading } = useRequest(items[type].listApi, {
    refreshDeps: [type],
    onSuccess: (res) => {
      if (res?.find?.(i => i.isRead === 0)) {
        readComment()
      }
    }
  })
  const { run: readComment } = useRequest(items[type].readApi, {
    manual: true,
    onSuccess: (res) => {
      changeNoticeNum({
        ...noticeNum,
        totalCount: 0,
        [type]: 0,
      })
    }
  })
  const list = useMemo(()=>{
    if(type==='followCount')return data||[]
    return (data||[]).filter(i=>i.articleTitle)
  },[data,type])


  return <div className={styles.box}>
    <div className={styles.container}>
      <div className={styles.contentContainer}  >
        <div className={styles.top}>
          <Tabs className={styles.tabs} activeKey={type} items={noticeFileds} onChange={(key) => {
            history.push(`/notice?type=${key}`)
          }} />
        </div>
        <SpinBox loading={loading} size='middle'>
          <div className={styles.list}>
            {
              !loading && list?.map?.((item,index) => <div key={index}>
                {items[type].render(item)}
              </div>)
            }
          </div>
        </SpinBox>
      </div>
     
    </div>
    </div>;
};
